<template>
  <lay-container fluid="true" class="organization-box">
    <div style="display: flex;overflow-y:auto;  ">
      <div :style="{ width: isFold ? `0px` : `250px` }" class="left-tree">
        <!-- tree -->
        <div v-show="!isFold">

         

          <lay-button type="normal" size="sm" 
              v-permission="['/htsql/index:auth']" 
              @click="toInsert"
              :disabled="toolEnable.insertDisabled"
                    >
          <lay-icon type="layui-icon-addition"></lay-icon>新建
          </lay-button>
   
          <lay-button type="warm" size="sm" 
          @click="toUpdate"           
          :disabled="toolEnable.updateDisabled">
            <lay-icon type="layui-icon-edit"></lay-icon>修改
          </lay-button>
          <lay-button type="danger" size="sm" 
          @click="toDelete" 
          :disabled="toolEnable.deleteDisabled">
            <lay-icon type="layui-icon-delete"></lay-icon>删除
          </lay-button>

          <lay-line></lay-line>
        </div>

        <lay-tree
          v-show="!isFold"
          style="margin-top: 10px"
          :data="dataSource"
          v-model:selectedKey="selectedKey"
          :showLine="true" 
          v-model:expandKeys="expandKeys"
          @node-click="handleClick"
          :onlyIconControl="true"
        >
          <template #title="{ data }">
            <lay-icon :type="data.imgurl"  ></lay-icon>
            <span :class="selectedKey == data.id ? 'NodeSelected' : ''">
              {{ data.title }} {{ data.code }}
            </span>
          </template>
        </lay-tree>
        <div class="isFold" @click="isFold = !isFold">
          &nbsp;<lay-icon v-if="!isFold" class="layui-icon-left"></lay-icon>
          <lay-icon v-else class="layui-icon-right"></lay-icon>
        </div>
      </div>
      <div style="flex: 1; padding: 10px;  ">
           
       <component ref="detailComponent"   :is="componentName" :data="selectedNode" />
       
      </div>
    </div>
     
 
  </lay-container>
</template>



<script lang="ts">
import { ref, watch,reactive,onMounted,h } from 'vue'
import { layer } from '@layui/layer-vue'
import MyHttp from "../../library/MyHttp";  
import MyWin from "../../library/MyWin"; 
import MyPage from "../../library/MyPage"; 
import {MyExcel} from "../../library/MyExcel"; 
import {MySimpleExport,TableColumn} from "../../library/MySimpleExport"; 
import MyData from '../../library/MyData';

import {useUserStore} from "../../store/user";  
import MyAuth from "../../library/MyAuth";  


import add from "./add.vue";  
import additem from "./additem.vue";  
import detail from "./detail.vue";  
import detailitem from "./detailitem.vue";  
import blank from "../htty/blank.vue";  
export default {
  components:{  detail, detailitem,blank},
  setup() { 
    const baseUrl="/htsql";
    const baseQUrl=baseUrl+"/tree";
    const pageName="sql维护";
  
    const myWin=ref<any>(null);
    const selectedKey = ref() 
    const selectedNode=ref();
    const componentName=ref("blank"); 
    const detailComponent=ref<any>();


    const dataSource=ref<any>();
    const queryTree=async (selected:any) =>{
      let qm={         
      }
       
      var r=await new MyHttp().post(baseQUrl,qm,
        { 
        }
      );  
      var root={
        "pid":0,
        "code":"",
        "name":"sql维护",
        "lx":"根目录",
        "imgurl":"",
        "p1":"",
        "p2":"",
        "p3":"",
        "p4":"",
        "expanded":"",
        "hasChildren":"",
        "children":r.data,
        "obj":"",
        "id":0, 
      }
      var rootArr=new Array();
      rootArr.push(root);
      MyData.toLayTree(rootArr);  
      dataSource.value=rootArr;  
      expandAll(true);
      if(selected){
        selectedKey.value=selected; 
      }else{
        if(r.data.length>0){ 
            if(r.data[0].children&&r.data[0].children.length>0){ 
              selectedKey.value=r.data[0].children[0].id;
            }else{ 
              selectedKey.value=r.data[0].id;
            } 
        } 
      } 
      treeSelectChange();
    } 
    const expandKeys=ref<any>([]);
    const expandAll=(expanded:boolean)=>{
        if(expanded){
          expandKeys.value=MyData.getTreeIds( dataSource.value) ;
        }
        else{
          expandKeys.value=[];
        }
    }
    const handleClick=async (node: any)=>{
      selectedKey.value=node.id;  
      selectedNode.value=node;
      treeSelectChange();
    }
    const treeSelectChange=()=>{
      if(!selectedNode.value){
        selectedNode.value=MyData.getById(dataSource.value,selectedKey.value)
      }
      var newComponentName="";
      switch(selectedNode.value.lx){
          case "根目录":
            { 
                toolEnable.value.insertDisabled=false;
                toolEnable.value.updateDisabled=true;
                toolEnable.value.deleteDisabled=true;
                newComponentName="blank";  
                
            }
            break;
            case "目录":
            { 
                toolEnable.value.insertDisabled=false;
                toolEnable.value.updateDisabled=false;
                toolEnable.value.deleteDisabled=false;

                 

                newComponentName="detail";  
                
            }
            break;
            default: 
            { 
                toolEnable.value.insertDisabled=true;
                toolEnable.value.updateDisabled=false;
                toolEnable.value.deleteDisabled=false;   

              

                newComponentName="detailitem";  
                 
            }
            break;
        }
        if(newComponentName==componentName.value){
            (detailComponent.value as any).setData(selectedNode.value);
        }else{
          componentName.value=newComponentName;
        };  
    }
      

    const insertRow=async()=>{
      let qm1={
         
      }
      var r=await new MyHttp().post(baseUrl+"/InsertInit",qm1,
        { 
        }
      );  
      var opt={
          title: '新增分组',
          content: h( add, 
            {  
             data:r.data, 
             isAdd:true,
             onOk:(data:any)=>{
                queryTree( data.id)
             }       
            }
            ), 
          w:800,
          h:550
        }; 
        myWin.value.open(opt ); 
    }
    const updateRow=async(row:any)=>{
      let qm1={
         id:row.id
      }
      var r=await new MyHttp().post(baseUrl+"/detail",qm1,
        { 
        }
      );  
      var opt={
          title: '修改分组',
          content: h( add, 
            {  
             data:r.data, 
             isAdd:false,
             onOk:(data:any)=>{
                queryTree( data.id)
             }       
            }
            ), 
          w:800,
          h:550
        }; 
        myWin.value.open(opt ); 
    }


    

    const deleteRow=async(data:any)=>{
      let msg=`是否删除分组 ${data.name} ?`;
      let qm={
        id:data.id
      };
      MyWin.confirm(msg,{
          onOK:async()=>{
            var r= await new MyHttp().post(baseUrl+"/delete",qm,
              { 
              }
            ); 
            queryTree("");
          }
      })
    }

    const insertItem=async(row:any)=>{
      let qm1={
         id:row.id,
      }
      var r=await new MyHttp().post(baseUrl+"/InsertInitItem",qm1,
        { 
        }
      );  
      var opt={
          title: '新增Sql',
          content: h( additem, 
            {  
             data:r.data, 
             isAdd:true,
             onOk:(data:any)=>{
                queryTree(r.data.id)
             }       
            }
            ), 
          w:800,
          h:850
        }; 
        myWin.value.open(opt ); 
    }
    const updateItem=async(row:any)=>{
      let qm1={
         id:row.id,
      }
      var r=await new MyHttp().post(baseUrl+"/detailItem",qm1,
        { 
        }
      );  
      var opt={
          title: '修改Sql',
          content: h( additem, 
            {  
             data:r.data, 
             isAdd:false,
             onOk:(data:any)=>{
                queryTree(r.data.id)
             }       
            }
            ), 
          w:800,
          h:850
        }; 
        myWin.value.open(opt ); 
    }

    const deleteItem=async(data:any)=>{
      let msg=`是否删除Sql ${data.name} ?`;
      let qm={
        id:data.id
      };
      MyWin.confirm(msg,{
          onOK:async()=>{
            var r= await new MyHttp().post(baseUrl+"/deleteItem",qm,
              { 
              }
            ); 
            queryTree("");
          }
      })
    }


    const isFold = ref(false)
    onMounted(() =>{  
      myWin.value=new MyWin();
      queryTree("");
       
    });
  
    const toInsert=()=>{
       
      switch(selectedNode.value.lx){
          case "根目录":
            {  
              insertRow( );
            }
            break;
            case "目录":
            { 
                insertItem(selectedNode.value);
            }
            break;
            default: 
            { 
                          
            }
            break;
      }
    }
    const toUpdate=()=>{
      
      switch(selectedNode.value.lx){
          case "根目录":
            {  
            }
            break;
            case "目录":
            { 
                updateRow(selectedNode.value);
            }
            break;
            default: 
            { 
                updateItem(selectedNode.value);
            }
            break;
      }
    }
    const toDelete=()=>{
       
      switch(selectedNode.value.lx){
          case "根目录":
            {  
            }
            break;
            case "目录":
            { 
                deleteRow(selectedNode.value);
            }
            break;
            default: 
            { 
                deleteItem(selectedNode.value);
            }
            break;
      }
    }
    const toolEnable=ref<any>({
      insertDisabled:false,
      updateDisabled:true,
      deleteDisabled:true
    })
    
    return {
      isFold,
      queryTree,
      dataSource,
      selectedKey, 
      selectedNode,

      handleClick,

      expandAll,
      expandKeys,
      
      toInsert,
      toUpdate,
      toDelete,
      insertRow,
      updateRow,
      deleteRow,
      insertItem,
      updateItem,
      deleteItem,

      toolEnable, 

      componentName,
      detailComponent,


    }
  }
}
</script>

<style scoped>
.organization-box {
  width: calc(100vw - 240px);
  height: calc(100vh - 110px);
  margin-top: 10px;
  box-sizing: border-box;
  background-color: #fff;
  overflow: hidden;
}
.left-tree {
  display: inline-block;
  padding: 20px 15px 0 5px;
  height: 1200px;
  border-right: 1px solid #e6e6e6;
  box-sizing: border-box;
  position: relative;
}
/* todo layui-tree-entry 设置无效 */
.layui-tree-entry {
  position: relative;
  padding: 10px 0;
  height: 20px;
  line-height: 20px;
  white-space: nowrap;
}
 
.isFold {
  position: absolute;
  top: 36%;
  right: -10px;
  width: 26px;
  height: 26px;
  line-height: 26px;
  border-radius: 13px;
  background-color: #fff;
  border: 1px solid #e6e6e6;
  cursor: pointer;
}

.search-input {
  display: inline-block;
  width: 98%;
  margin-right: 10px;
}

.isChecked {
  display: inline-block;
  background-color: #e8f1ff;
  color: red;
}
</style>